<template>
  <view class="register-form">
    <!-- <input type='text' style="position: fixed;bottom: -9999px;" />
    <input type='password' style="position: fixed;bottom: -9999px;" /> -->
    <view class="register-form-item mb20">
      <u--input
        v-model="form.phone"
        border="none"
        type="text"
        maxlength="11"
        prefixIcon="phone"
        prefixIconStyle="color: #fff;font-size: 22px;line-height: 22px;"
        placeholder="输入你的手机号"
        :spellcheck="false"
        clearable
        @blur="phoneTest"
      />
    </view>
    <view class="register-form-item mb20">
      <u--input
        v-model="form.password"
        border="none"
        type="password"
        prefixIcon="lock"
        prefixIconStyle="color: #fff;font-size: 22px;line-height: 22px;"
        placeholder="输入账号密码"
        :spellcheck="false"
        clearable
      />
    </view>
    <view class="register-form-item mb20">
      <u--input
        v-model="form.confirmPassword"
        border="none"
        type="password"
        prefixIcon="lock-fill"
        prefixIconStyle="color: #fff;font-size: 22px;line-height: 22px;"
        placeholder="再次输入账号密码"
        :spellcheck="false"
        clearable
        @blur="confirmPasswordTest"

      />
    </view>
    <view class="register-form-item mb20">
      <u--input
        v-model="form.email"
        border="none"
        prefixIcon="email"
        prefixIconStyle="color: #fff;font-size: 22px;line-height: 22px;"
        placeholder="输入绑定的邮箱地址"
        :spellcheck="false"
        clearable
        @blur="emailTest"
      />
    </view>
    <view class="register-form-code mb20">
      <u-input
        v-model="form.code"
        maxlength="4"
        border="none"
        type="text"
        prefixIcon="fingerprint"
        prefixIconStyle="color: #fff;font-size: 22px;line-height: 22px;"
        placeholder="输入邮箱验证码"
        :spellcheck="false"
      >
        <text slot="suffix" style="color: #2b85e4;" @click="sendCodee">{{ form.codeText }}</text>
      </u-input>
    </view>
    <view class="register-form-handle flexColCenter mb20">
			<button class="register-form-handle-button mb10" size="mini" @click="submit">
				<u-icon name="arrow-rightward" color="#f6f6f6" />
			</button>
			<text style="color: #2b85e4;" @click="toLogin">返回登录</text>
		</view>
    <u-code ref="registerFormCode" :seconds="300" uniqueKey="registerFormCode" keepRunning @change="registerFormCodeChange" />
  </view>
</template>
<script>
import { isPhone, isEmail } from "@/utils/verify.js";
export default {
  options: {
    styleIsolation: "shared",
  },
  data() {
    return {
      form: {
        phone: "",
        password: "",
        confirmPassword: "", // 确认密码
        email: "",
        code: "", // 邮箱验证码
        codeText: '获取验证码', // 验证码文案
      },
    };
  },
  methods: {
    // 提交注册
    async submit() {
      if (!isPhone(this.form.phone)) {
        this.showToast("请输入正确的手机号");
        return;
      }
      if (!this.form.password || !this.form.confirmPassword) {
        this.showToast("请输入账号密码");
        return;
      }
      if (!this.confirmPasswordTest()) {
        return
      }
      if (!isEmail(this.form.email)) {
        this.showToast("请输入正确的邮箱地址");
        return;
      }
      const { code } = await this.$user.userRegister(this.form)
      if (code === 0) {
        this.showToast('注册成功')
        this.toLogin()
      }
    },
    // 点击发送验证码
    async sendCodee() {
      if (!this.$refs.registerFormCode.canGetCode) { // false时为已发送验证码状态
        return
      }
      if (!isEmail(this.form.email)) {
        this.showToast("请输入正确的邮箱地址");
        return;
      }
      const { code } = await this.$verify.emailVerify({
        email: this.form.email
      })
      if (code === 0) {
        this.showToast('验证码已发送')
        this.$refs.registerFormCode.start()
      }
    },
    // 验证码倒计时期间，每秒触发一次
    registerFormCodeChange(text) {
      this.form.codeText = text
    },
    // 再次输入密码校验
    confirmPasswordTest() {
      if (this.form.password !== this.form.confirmPassword) {
        this.showToast('两次输入的密码不一致')
        return false
      }
      return true
    },
    // 邮箱输入验证码
    emailTest() {
      if (!isEmail(this.form.email)) {
        this.showToast("请输入正确的邮箱地址");
        return;
      }
    },
    // 手机号输入验证
    phoneTest() {
      if (!isPhone(this.form.phone)) {
        this.showToast("请输入正确的手机号");
        return;
      }
    },
    // 返回登录
    toLogin() {
      this.$emit('update:pageType', 'loginForm')
    }
  },
};
</script>
<style lang="scss" scoped>
.register-form{
    &-item {
			/deep/ .u-input {
				background: rgba(0, 0, 0, .25);
				padding: 16rpx 40rpx !important;
				border-radius: 40rpx;

				&__content__field-wrapper {
					margin-left: 20rpx;

					&__field {
						color: #FFFFFF !important;
						letter-spacing: 2px;
						width: 100%;
					}
				}

				&__content__subfix-icon {
					width: 192rpx;
					height: 48rpx;
					background: #FFFFFF;
					border-radius: 10rpx;
				}
			}
		}

		&-code {
			/deep/ .u-input {
				background: rgba(0, 0, 0, .25);
				border-radius: 40rpx;

				&__content {
					&__prefix-icon{
						padding: 16rpx 0 16rpx 40rpx !important;
					}
					&__field-wrapper {
						margin-left: 20rpx;

						&__field {
							color: #FFFFFF !important;
							letter-spacing: 2px;
							width: 100%;
						}
					}

					&__subfix-icon {
						width: 210rpx;
					  height: auto;
            font-size: 28rpx;
					}
				}
			}
		}
    &-handle {
			&-button {
				padding: 18rpx 120rpx !important;
				border-radius: 40rpx;
				background: rgba(0, 0, 0, .25);
				/deep/ .u-icon {}
			}
		}
}
</style>
